<template>

		  <div class="console">
			<div class="card art-custom-card" >	
			
			
			归属部门
			
			
			  <el-select
			    v-model="value"
			    clearable
			    placeholder="Select"
			    style="width: 240px"
			  >
			    <el-option
			      v-for="item in options"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value"
			    />
			  </el-select>
			 <el-button type="danger">查询</el-button>
			  <el-button>重置</el-button>
			<el-button color="#F24957" >创建</el-button>
			
			
			
			<el-table :data="tableData" style="width: 100%">
				
				
			    <el-table-column fixed prop="date"  label="序号" width="150" />
			    <el-table-column prop="name" label="归属部门" width="120" />
			    <el-table-column prop="state" label="班次类型" width="120" />
			    <el-table-column prop="start" label="班次开始时间" width="120" />
			    <el-table-column prop="end" label="班次结束时间" width="120" />
			    <el-table-column prop="create"  sortable label="创建日期" width="220" />
			    <el-table-column fixed="right" label="操作" min-width="120">
			      <template #default>
			        <el-button link type="primary" size="small" @click="handleClick">
			          修改
			        </el-button>
			        <el-button link type="primary" size="small">删除</el-button>
			      </template>
			    </el-table-column>
			  </el-table>
			
			
			
			
			</div>

	</div>
	
	
	
	
	
	
	
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	
	const value = ref('')
	const options = [
	  {
	    value: 'Option1',
	    label: 'Option1',
	  },
	  {
	    value: 'Option2',
	    label: 'Option2',
	  },
	  {
	    value: 'Option3',
	    label: 'Option3',
	  },
	  {
	    value: 'Option4',
	    label: 'Option4',
	  },
	  {
	    value: 'Option5',
	    label: 'Option5',
	  },
	]
	
	//表格数据
	const tableData = [
	  {
	    date: '1',
	    name: 'Tom1',
	    state: 'California',
	    start: '09:00:00',
	    end: '17:00:00',
	    create: '2024-05-15 13:48:24',
	    tag: 'Home',
	  },
	{
	  date: '2',
	  name: 'Tom2',
	  state: 'California',
	  start: '09:00:00',
	  end: '17:00:00',
	  create: '2024-05-15 14:35:07',
	  tag: 'Home',
	},
	{
	  date: '3',
	  name: 'Tom3',
	  state: 'California',
	  start: '09:00:00',
	  end: '17:00:00',
	  create: '2024-05-15 14:35:34',
	  tag: 'Home',
	},
	{
	  date: '4',
	  name: 'Tom4',
	  state: 'California',
	  start: '09:00:00',
	  end: '17:00:00',
	  create: '2024-05-16 13:48:24',
	  tag: 'Home',
	},
	]
	
</script>

<style lang="scss" scoped>
	  @use './style';
	
  .card-list {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    //background-color: transparent !important ;


    .art-custom-card {
      position: relative;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
	    // height: 140px;
      height: 200px;
      padding: 0 18px;
      list-style: none;
      transition: all 0.3s ease;
      $icon-size: 52px;

    .iconfont-sys {
      position: absolute;
      top: 0;
      right: 20px;
      bottom: 0;
      width: 10rem;
      height: 9.5rem;
      margin: auto;
      overflow: hidden;
      font-size: 22px;
      line-height: $icon-size;
      color: var(--el-color-primary) !important;
      text-align: center;
    		 background-color:rgba(255, 255, 255, 0);
    		 
     // background-color: var(--el-color-primary-light-9);
      border-radius: 12px;
    		
    }

      .des {
		  
        display: block;
        height: 14px;
        font-size: 24px;
        line-height: 14px;
		color: aliceblue;
      }

      .number {
		 color: aliceblue;
        display: block;
        margin-top: 10px;
        font-size: 28px;
        font-weight: 700;
      }

      .change-box {
        display: flex;
        align-items: center;
        margin-top: 10px;
        .change-text {
          display: block;
          font-size: 13px;
          color: var(--art-text-gray-600);
        }






        .change {
          display: block;
          margin-left: 5px;
          font-size: 13px;
          font-weight: bold;
		  

          &.text-success {
            color: var(--el-color-success);
          }

          &.text-danger {
            color: var(--el-color-danger);
          }
        }
      }
    }
  }

  .dark {
    .card-list {
      .art-custom-card {
        .iconfont-sys {
          background-color: #232323 !important;
		  
        }
      }
    }
  }
</style>
